<template>
  <div>
    <van-nav-bar
      title="快递单评价"
      left-arrow
      right-text="提交"
      @click-left="onleftClick"
      @click-right="tijiaoClick"
    />

    <div class="total">
      <h4>总体评分</h4>

      <p><span>{{total}}</span>分</p>
      <van-rate v-model="total" icon="smile" void-icon="smile-o" />
    </div>
    <div class="rote">
      <h2>店铺评分</h2>

      <div class="title-bottom">
        <ul>
          <li>
            <div>店铺评分</div>
            <van-rate
              v-model="shopVal"
              :size="30"
              color="#ffcf60"
              void-icon="star"
              void-color="#eee"
            />
          </li>
          <li>
            <div>物流速度</div>
            <van-rate
              v-model="suduVal"
              :size="30"
              color="#ff8d5b"
              void-icon="star"
              void-color="#eee"
            />
          </li>
          <li>
            <div>快递评分</div>
            <van-rate
              v-model="expressVal"
              :size="30"
              color="#ff5d5e"
              void-icon="star"
              void-color="#eee"
            />
          </li>
        </ul>
      </div>
    </div>

    <div class="upfile">
      <textarea
        name=""
        id=""
        cols="30"
        rows="5"
        v-model="textVal"
        placeholder="写几句评价"
      >
      </textarea>

      <van-uploader v-model="fileList" multiple />
    </div>
  </div>
</template>

<script>
import {expEstimate} from '../request/api'
export default {
  data() {
    return {
      // 店铺评分
      shopVal: 1,
      // 物流速度
      suduVal: 1,
      // 快递评分
      expressVal: 1,
      // 评价
      textVal: "",
      // 总分
      totalScore:1,
      // 预览图片
      fileList: [
        { url: "https://img01.yzcdn.cn/vant/leaf.jpg" },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        { url: "https://cloud-image", isImage: true },
      ],
    };
  },
  methods: {
    onleftClick() {
      this.$router.push("/express");
    },
    tijiaoClick(){
      this.$router.push('/express')
    }
  },
  created() {
    // console.log(this.$route.query.item.id);

    expEstimate({
      "shop":this.shopVal,
      "logistics":this.suduVal,
      "express":this.expressVal,
      "totalScore":this.totalScore,
      "orderCode":this.$route.query.item.orderCode,
      "id":this.$route.query.item.id,
      "info":this.textVal

    }).then(res=>{
      // console.log(res);
    })
  },
    computed:{
    total(){
      return (this.totalScore=parseInt((this.shopVal+this.suduVal+this.expressVal)/3));
    }
  }
};
</script>
 
<style lang = "less" scoped>
/deep/.van-nav-bar {
  background-color: #003399;

  .van-nav-bar__title,
  .van-icon-arrow-left::before {
    color: #fff;
  }
  .van-nav-bar__text {
    color: #fff;
  }
}
/deep/.van-rate__icon--full {
  color: orange;
}

/deep/.van-rate__icon {
  font-size: 50px;
}

.total {
  text-align: center;
  background: #fff;
  padding: 20px;
  border-bottom: 1px solid #efefef;
  h4 {
    font-size: 18px;
    color: #666;
  }

  p {
    color: #ffcc33;
    margin: 10px 0;
    span {
      font-size: 50px;
      margin-right: 5px;
    }
  }

  .phone {
    display: flex;
    justify-content: space-between;
    width: 100%;
    img {
      width: 12%;
    }
  }
}

.rote {
  background-color: #fff;
  padding: 20px;

  .title-bottom {
    background-color: #fff;
    ul {
      li {
        display: flex;
        align-items: center;
        padding: 20px;
        div {
          margin-right: 20px;
        }
      }
    }
  }
}

.upfile {
  padding: 10px;
  background-color: #fff;
  margin-top: 10px;

  textarea {
    border: 0;
  }
}
</style>